<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width: 750px;
	height: 500px;
}

.portlet-default {
	padding: 20px;
}
.avatar-uploader 
.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

</head>
<body>
	<div id="app" class="app">
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				<span set-lan="html:用户添加"></span>
			</h4>
			<hr class="border-t-a">
		</div>
		
		<el-form :model="ruleForm" ref="ruleForm"> <el-form-item
								label="部门 : " prop="dep_id"> <el-select
								placeholder="请选择部门" v-model="ruleForm.dep_id"
								@change="selectChange"> <el-option
								v-for="item in depttions" :label="item.dep_name"
								:value="item.dep_id"></el-option> </el-select> </el-form-item> 
								<el-form-item label="部门名称："
								prop="roleName"> <el-input
								v-model="ruleForm.deptName" style="width: 220px"></el-input>
								 </el-form-item>
								
								 <span>
								<el-button @click="cancleSaveNodese()"> 取消 </el-button> <el-button
									@click="submitForm('ruleForm')"> <!--  --> 确定 </el-button>
							</span> </el-form>
	</div>
	
	<script>
			var app = new Vue({
				el: "#app",
				data() {
					return {
						options:[],
						depttions:[],
						persstion:[],
						ruleForm: {
							dep_id: '',
							deptName: '',
						},
						//验证规则
						rules: { //数据源model
							dep_id: [{
									required: true,
									message: '请选择部门',
									trigger: 'blur'
								},
							],
							roleName:[
								{
									required: true,
									message: '请输入角色',
									trigger: 'blur'
								}
							],
							permissionrole:[
								{
									required: true,
									message: '请选择权限',
									trigger: 'blur'
								}
							]
						}
					};
				},
				methods: {
					submitForm(formName) {
						alert(this.ruleForm);
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/setRole",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
									window.parent.location.replace("/dept");
										//parent.location.reload(); 
								}).catch(function(e) {
									//alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
<<<<<<< HEAD
					selectChange:function(){
						
					},
					cancleSaveNodese:function(){
						//alert("xhxxhxhxhxhxxh");
						window.close();
						parent.location.reload();
					}
				},
				mounted() {
					var piliang = ${findDeptSupperid};
					console.info(piliang+"        piliang");
					this.depttions=piliang;
					this.options=piliang;
					console.info(piliang+"        this.depttions")
=======
					cancleSaveNodese:function(){
						//alert("xhxxhxhxhxhxxh");
						window.close();
						parent.location.reload();
					}
				},
				mounted() {
					var piliang = ${xms};
					console.info(piliang+"        piliang");
					this.depttions=piliang.deptse;
					this.options=piliang.persstion;
					console.info(piliang.deptse+"        this.depttions")
>>>>>>> refs/remotes/origin/产品
				}
			});
		</script>
</body>
</html>